import React, { ReactElement } from 'react'
import { Form, Input, Radio, Select, Tag } from 'antd'
import { defaultFormLayout } from 'src/layout/defaultFormLayout'
import TextArea from 'antd/es/input/TextArea'
import style from 'src/pages/navPages/signPage/style.module.scss'
const { Option } = Select

interface SignTeamCreateProps {
    raceName: string;
    teacherChange: (value: string) => void;
}

export const SignTeamCreate: React.FC<SignTeamCreateProps> = (props: SignTeamCreateProps) => (
    <div>
        <Form {...defaultFormLayout}>
            <Form.Item label={'比赛名称'}>
                <h3>{props.raceName}</h3>
            </Form.Item>
            <Form.Item label={'队伍名称'}>
                <Input allowClear/>
            </Form.Item>
            <Form.Item label={'队伍宣言'}>
                <TextArea/>
            </Form.Item>
            <Form.Item label={'指导老师'}>
                <Select mode={'multiple'}
                    showSearch
                    placeholder="搜索教师"
                    optionFilterProp="children"
                    onChange={props.teacherChange}
                    filterOption={(input: string, option: ReactElement): boolean => {
                        if (typeof option.props.children === 'string') {
                            return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        return false
                    }}>
                    <Option value="12">黄安</Option>
                    <Option value="13">黄永平</Option>
                    <Option value="14">江宁</Option>
                </Select>
            </Form.Item>
            <Form.Item label={'参赛类型'}>
                <Radio.Group defaultValue="single" buttonStyle="solid">
                    <Radio.Button value="single">单人赛</Radio.Button>
                    <Radio.Button value="team">团队赛</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label={'邀请队员'}>
                <Tag color="cyan" closable>某同学</Tag>
                <div>
                    <Input.Search placeholder={'搜索队友姓名或手机号'} enterButton/>
                </div>
                <p className={style.formDescription}>邀请完成后，请通知队员在 个人页面 - 我的消息 页面内接受邀请并确认信息</p>
            </Form.Item>
        </Form>
    </div>
)
